<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WH_UI_CARD</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="card.css">
    <link rel="stylesheet" href="button.css">
    <style>
        body{
            background: #e2e2e2;
        }
        #div1{
            width:200px;
            height:600px;
            margin:0 auto;
            opacity:0.5;
            filter:alpha(opacity=50);
            background-color: #5e5e5e;
            color: white;
        }
    </style>
</head>
<body>
    <div class="main-inner body-width">
        <div class="wh_card main-album">
            <div class="wh_card__title">
                <h3>卡片一</h3>
            </div>
            <ul class="wh_card__list clearfix">
                <li class="item">
                    <a href="#" class="pic"><img src="images/main_img1.jpg" alt="#"></a>
                    <div class="info">
                        <a href="#" class="title">你的书写工具需要一个庇护所</a>
                        <p>68张图片 · 2255人收藏</p>
                        <p>by <a href="#" class="author">Moollly</a></p>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="pic"><img src="images/main_img2.jpg" alt="#"></a>
                    <div class="info">
                        <a href="#" class="title">你的书写工具需要一个庇护所</a>
                        <p>68张图片 · 2255人收藏</p>
                        <p>by <a href="#" class="author">Moollly</a></p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="wh_card main-recommend">
            <div class="wh_card__title">
                <h3>卡片二</h3>
            </div>
            <ul class="wh_card__list clearfix">
                <li class="item">
                    <a href="#" class="pic"><img src="images/main_img7.jpg" alt="#"></a>
                    <div class="info">
                        <a href="#" class="title">夹克</a>
                        <span>18739人在逛</span>
                        <a href="#" class="icon-text__pink purchase">查看</a>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="pic"><img src="images/main_img7.jpg" alt="#"></a>
                    <div class="info">
                        <a href="#" class="title">夹克</a>
                        <span>18739人在逛</span>
                        <a href="#" class="icon-text__pink purchase">查看</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="wh_card main-user">
            <div class="wh_card__title">
                <h3>卡片三</h3>
            </div>
            <ul class="wh_card__list clearfix">
                <li class="item">
                    <a href="#" class="pic" style=" background: url(images/user_img2.jpg) no-repeat; background-size: cover; "></a>
                    <a href="#" class="headImg"><img src="images/head_img2.jpeg" alt="#"></a>
                    <div class="info">
                        <a href="#" class="info-title">虽虽酱</a>
                        <p><i class="icon-star"></i>9645</p>
                        <p>擅长领域: <b>Q版</b></p>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="pic" style=" background: url(images/user_img2.jpg) no-repeat; background-size: cover; "></a>
                    <a href="#" class="headImg"><img src="images/head_img2.jpeg" alt="#"></a>
                    <div class="info">
                        <a href="#" class="info-title">虽虽酱</a>
                        <p><i class="icon-star"></i>9645</p>
                        <p>擅长领域: <b>Q版</b></p>
                    </div>
                </li>
            </ul>
        </div>
        <a href="http://www.bootcss.com/" class="button button-glow button-rounded button-raised button-primary">Go</a>
        <a href="http://www.bootcss.com/" class="button button-glow button-border button-rounded button-primary">Go</a>
        <button class="button button-glow button-circle button-action button-jumbo"><i class="fa fa-thumbs-up"></i></button>
        <a href="http://www.bootcss.com/" class="button button-glow button-rounded button-highlight">Go</a>
        <a href="http://www.bootcss.com/" class="button button-glow button-rounded button-caution">Go</a>

        <a href="http://www.bootcss.com/" class="button button-raised button-primary button-pill">Visit Us!</a>
        <button class="button button-raised button-action button-circle button-jumbo"><i class="fa fa-thumbs-up"></i></button>
        <a href="http://www.bootcss.com/" class="button button-raised button-caution"><i class="fa fa-camera"></i> Go</a>
        <a href="http://www.bootcss.com/" class="button button-raised button-royal">Say Hi!</a>
        <a href="http://www.bootcss.com/" class="button button-raised button-pill button-inverse">Say Hi!</a>
    </div>
    <div class="wh_card main-recommend">
        <div class="wh_card__title">
            <a class="ui button" id="btn">上传图片</a>
            <a class="fileBtn delete" id="all-delete">一键删除</a>图片最大可传1MB，最多可传8张，支持jpg，gif，png格式。
        </div>
        <ul class="wh_card__list clearfix img_uploader">
        </ul>
    </div>
    <div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
            <path d="M 0,70 80,60 80,80 0,80 0,70"/>
        </svg>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<!--<script src="js/plupload.full.min.js"></script>
<script>
    var uploader = new plupload.Uploader({//创建实例的构造方法
        runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序
        browse_button: 'btn', // 上传按钮
        url: '/dsdf/sd', //远程上传地址
        flash_swf_url: '/js/Moxie.swf', //flash文件地址
        silverlight_xap_url: '/js/Moxie.xap', //silverlight文件地址
        filters: {
            max_file_size: '2mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
            mime_types: [//允许文件上传类型
                {title: "files", extensions: "jpg,png,gif"}
            ]
        },
        multi_selection: true //true:ctrl多文件上传, false 单文件上传
    });
    configUploadForService($('.img_uploader'));
    uploader.init();

    function configUploadForService(elem1) {
        var $ul_pics = elem1;
        uploader.bind('FilesAdded',function(up, files){
            var index = $ul_pics.children('li').length;
            if (files.length > 8 || index > 8 || index + files.length > 8) {
                layer.msg("您上传的图片太多了！", {icon: 5,anim:6});
            } else {
                var li = '';
                plupload.each(files, function(file) { //遍历文件
                    li += "<li id='" + file['id'] + "'  class='item'>" +
                        "<a href='javascript:void(0);' class='pic'>" +
                        "</a>" +
                        "<div class='info'>"+
                        "<a href='javascript:void(0);' class='icon-text__pink purchase'>删除</a>" +
                        "</div>"+
                        "</li>";
                });
                $ul_pics.append(li);
                obj.start();
            }
        });
        uploader.bind('UploadProgress',function (up, file) {
            $("#" + file.id).find('.progress').html('<img src="/img/loading.gif" width="224px"/>');
            /*$("#" + file.id).find('.icon-delete').on('click',function () {
             var $this = $(this);
             layer.confirm('是否确定撤销该张图片？', {
             title: '<b style="letter-spacing: 2px;font-size: 1.2em">确认信息</b>',
             btn: ['确定撤销', '手抖点错']
             }, function(index, layero) {
             //执行删除操作
             $this.parent('li').remove();
             layer.close(index);
             });
             });*/
        });
        uploader.bind('FileUploaded',function (up,file,info) {
            var data = eval("(" + info.response + ")");
            /*img_srcs += data+',';*/
            $("#" + file.id).find('.pic').html('<img src="'+ data +'" alt="#">');
            /*$all_delete.show();
             $("#" + file.id).find('.icon-delete').on('click',function () {
             var $this = $(this);
             layer.confirm('是否确定撤销该张图片？', {
             title: '<b style="letter-spacing: 2px;font-size: 1.2em">确认信息</b>',
             btn: ['确定撤销', '手抖点错']
             }, function(index, layero) {
             //执行删除操作
             var num =  $this.parents('li').index($ul_pics.children('li'));
             $this.parents('li').remove();
             var name = $this.prev('img').attr('src');
             name = name.substring(8);
             /!*删除单张图片*!/
             $.post('deleteuploadimage.html' , {name : name} , function (data) {
             console.log(num);
             var del_img_src = img_srcs.substring(0 , img_srcs.length-1);
             del_img_src = del_img_src.split(',');
             img_srcs = '';
             del_img_src.splice(num, 1);
             for(var y = 0 ; y < del_img_src.length ; y ++){
             img_srcs += del_img_src[y] + ',';
             }
             $img_srcs.val(img_srcs);
             layer.msg(data ? "删除成功！" : "删除失败！");
             });
             layer.close(index);
             });
             });
             $("#" + file.id).find('.icon-cover').on('click',function () {
             var $this = $(this);
             $this.parents('li').insertBefore($ul_pics.children('li:eq(0)'));
             var name = $ul_pics.children('li:eq(0)').find('.img-show').attr('src');
             $first_img_src.val(name);
             /!*设置为首张缩略图*!/
             })*/
        });
        uploader.bind('UploadComplete',function () {
            /*$img_srcs.val(img_srcs);
             $first_img_src.val(img_srcs.split(',')[0]);
             $all_delete.on('click',function () {
             layer.confirm('是否确定删除所有图片？', {
             title: '<b style="letter-spacing: 2px;font-size: 1.2em">确认信息</b>',
             btn: ['确定删除', '手抖点错']
             }, function(index, layero) {
             //执行删除操作
             //遍历获取name
             var nameList = [];
             var length = $ul_pics.children('li').length;
             $ul_pics.children('li').each(function (i) {
             var name = $(this).find('.img-show').attr('src');
             name = name.substring(name.indexOf('.com/')+5);
             nameList.push(name);
             });
             /!*删除全部图片*!/
             $.post('deleteallimage.html' , {nameList : nameList} , function (data) {
             data = data.split(',');
             if(data[0]){
             layer.msg("全部删除成功！");
             $ul_pics.children('li').remove();
             $img_srcs.val("");
             img_srcs = "";
             $all_delete.hide();
             }
             });
             layer.close(index);
             });
             });*/
        });
        uploader.bind('Error',function (up,err) {
            /*layer.msg(err.message, {icon: 5,anim:6});*/
        });
    }
</script>-->
</html>